import styled from "styled-components";

const HeaderWrapper=styled.div`
width: 100%;
height: 2rem;
.header-h{
    position: relative;
    img{
    width: 100%;
    height: 100%;
}
    .header-body{
        position: absolute;
        width: 25%;
        height: 100%;
        right: 0;
        top: 0.2rem;
        img{
            width: 40%;
            height: 80%;
            margin-left: .4rem;
          
        }
    }

}
.header-search{
    width: 80%;
    height: 1.5rem;
    border: 1px solid white;
    margin:.5rem auto;
    line-height: 1.5rem;
    background-color: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    /* box-shadow: 1px 1px; */
    .search-city{
        text-align: center;
        font-size: .6rem;
        color: #303741;
        padding: 0 .5rem;
        box-sizing: border-box;
        position: relative;
        float: left;
        .search-city-triangle{
          display: inline-block;
          margin-left: 1.6vw;
          width: 0;
          height: 0;
         border: 0.8vw solid transparent;
         border-top-color: #303741;
        }
    }
    input{
        height: 60%;
        width: 60%;
        border: none;
        padding-top: .1rem;
    }
    button{
        width: 3rem;    
        height: 100%;
        color: white;
        background-image: linear-gradient(135deg,#19ac81 0%,#24d68e 100%);
        border-radius: 0.2rem;
        border: none;
    }
}

`

export {
    HeaderWrapper
} 